<template>
	<view>
		<view class="status_bar">
		    <!-- 这里是状态栏 -->
		</view>
		<view class="uni-column" style="margin: 5%;">

		<view  style="display: flex;flex-direction: row;justify-content: space-between;align-self: center;width: 100%;margin-top: 20px;align-self: center;">
			<text style="margin-left: 8%; font-weight: 700;">账号</text>
			<text style="font-weight: 700;">密码</text>
			<text style="margin-right: 9%; font-weight: 700;">操作</text>
		</view>
		<view v-for="staff in stafflist" style="display: flex;flex-direction: column;width: 100%;">
			<view style="display: flex;flex-direction: row;justify-content: space-between;align-self: center;width:85%;margin-top: 15px;">
				<view style=" font-weight: 400;">{{staff.w_phone}}</view>
				<view style="font-weight: 400;">{{staff.w_password}}</view>
				<view @click="deletestaff(staff.w_id)" style="background-color: #4aa0ff;color: #ffffff;border-radius: 5px;font-size: 13px;width: 45px;text-align: center;height: 25px;line-height: 25px;">删除</view>
			</view>
		</view>
		</view>
		
		<uni-fab
			:pattern="pattern"
			:popMenu="popMenu"
			horizontal="right"
			vertical="bottom"
			direction="horizontal"
			@fabClick="addstaff">
		</uni-fab>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stafflist:[],
				httpurl: getApp().globalData.weburl,
				pattern: {
					color: '#6666ff',
					backgroundColor: '#6666ff',
					selectedColor: '#FFFFFF',
					buttonColor:'#5aa7ff'
				},
				popMenu:false,
			}
		},
		onLoad() {
			this.getstaff();
		},
		onShow(){
			this.getstaff();
		},
		onPullDownRefresh () {
			// 在此处写刷新页面后的代码
			// 刷新需要重新获取数据库中的数据
			this.getstaff();
			//获取后对当前页面重新渲染
			uni.stopPullDownRefresh();//表示让刷新的按钮停止转圈
		    },
		methods: {
			getstaff(){
				var that = this;
				uni.request({
					url: that.httpurl+'getstaff', //服务器地址+接口名
					data: {
					  M_id:getApp().globalData.userid,
					},
					method: 'POST',
					header: {
					  'X-Requested-With': 'XMLHttpRequest',
					  "Accept": "application/json",
					  "Content-Type": "application/json; charset=UTF-8"
					 },
					dataType: 'json',
				 success: (res) => {
					 console.log("request success");
					 console.log(res.data);
					 that.stafflist = res.data.stafflist;
				 },
				 fail:(res) =>{
					 console.log("request fail");
					 }
				 })
			},
			deletestaff(id){
				var that = this;
				uni.request({
					url: that.httpurl+'delestaff', //服务器地址+接口名
					data: {
					  W_id:id,
					},
					method: 'POST',
					header: {
					  'X-Requested-With': 'XMLHttpRequest',
					  "Accept": "application/json",
					  "Content-Type": "application/json; charset=UTF-8"
					 },
					dataType: 'json',
				 success: (res) => {
					 console.log("request success");
					 console.log(res.data);
					 this.getstaff();
				 },
				 fail:(res) =>{
					 console.log("request fail");
					 }
				 })
			},
			addstaff(){
				console.log("转到添加工作人员界面");
				uni.navigateTo({
					url:'./addstaff/addstaff'
				});
			}
		}
	}
</script>

<style>
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
		background-color:#ffffff;
	}
</style>
